<template>
  <div>
    <!-- 
        el-form：form表单 model rules validate
        el-form-item：渲染label prop用来校验是否符合规则的（用来校验）
        el-input：实现了双向绑定输入框
     -->
     {{ruleForm}}
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
        <!-- 语法糖，这里隐形的传value给子和绑定input事件 -->
        <!-- <el-input :value="ruleForm.username" @input="v=>ruleForm.username=v"></el-input> -->
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <button @click="submitForm">提交表单</button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import elForm from '../elcomponents/el-form';
import elFormItem from '../elcomponents/el-form-item';
import elInput from '../elcomponents/el-input';
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符" },
        ],
        password: [{ required: true, message: "请输入密码" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      // validateEF(cb)函数里传回调函数，给到el-form里的validateEF，cb又传参true，给到变量valid
      this.$refs['ruleForm'].validateEF((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
  },
  components:{
    'el-form':elForm,
    'el-form-item':elFormItem,
    'el-input':elInput
  }
};
</script>